<template>
	<view class="page-wrapper">
		<userinfo id="user" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserinfo"></userinfo>
		<view class="order-detail" v-if="orderinfo">
			<view class="map-box" :style="{height: showMap ? systemInfo.windowWidth + 'px' : 0}">
				<view class="top-wrapper" :style="{background: mobile_head_color, opacity: opacity}"></view>
				<view class="top-title" v-if="opacity >= 1" :style="{background: mobile_head_color}">{{nowStatus}}</view>
				
				<map class="map" v-if="showMap"  id="orderMap" :latitude="orderinfo.store.lat" :longitude="orderinfo.store.lng" 
					:markers="covers" :style="{height: systemInfo.windowWidth + 'px', opacity: mapOpacity}"></map>
			</view>
			<view class="info-box" :style="{marginTop: showMap ? 0 : '44px'}">
				<view :class="'block-wrapper status-mask ' + ( showPayTip ? '' : 'cancel')" v-if="orderinfo.order.paid == 1 && orderinfo.order.status == 0 && orderinfo.order.is_pick_in_store != 3"
					:style="showMap ? '' : 'position:relative;top:0;'">
					<image class="img" src="/static/images/pay_phone@2x.png" mode="widthFix"></image>
					<view>
						<view><lang keywords="订单已支付成功！" chineseTxt="订单已支付成功！"/></view>
						<view class="font-10">
							<lang class="color-red" keywords="请注意" chineseTxt="请注意"/>：
							<lang keywords="商家由于某种原因可能会决绝接单或者超过X1分钟商家未接单，订单会取消并且自动退钱到您的余额。请注意订单状态。"
									:X1="orderinfo.order.shop_order_cancel_time"
									:chineseTxt="'商家由于某种原因可能会决绝接单或者超过'+ orderinfo.order.shop_order_cancel_time +'分钟商家未接单，订单会取消并且自动退钱到您的余额。请注意订单状态。'"/>
						</view>
					</view>
					<text class="iconfont icon-cha1 color-red close" @tap="closePayTip"></text>
				</view>
				<view class="block-wrapper pick-mask" v-if="orderinfo.btn_bar.isPickupOrder && orderinfo.btn_bar.show_pickup_address">
					<view class="address"><lang keywords="取餐商家地址为" chineseTxt="取餐商家地址为"/>：{{orderinfo.store.adress}}</view>
					<view class="btn">
						<text class="iconfont icon-dingwei1"></text>
						<view @tap="openMap"><lang keywords="导航" chineseTxt="导航"/></view>
					</view>
				</view>
				<view class="block-wrapper order-status" >
					<view v-if="orderinfo.btn_bar.showBigTip">{{orderinfo.btn_bar.order_mask}}</view>
					<view v-else-if="orderinfo.btn_bar.isDelivOrder">
						<view class="expected-time">
							<lang keywords="期望" chineseTxt="期望"/>
							<text class="color-red time">{{orderinfo.btn_bar.expect_use_time}}</text>
							<lang keywords="到达" chineseTxt="到达"/>
						</view>
						<view v-if="orderinfo.btn_bar.order_mask" class="small-tip">{{orderinfo.btn_bar.order_mask}}</view>
					</view>
					<view v-else-if="orderinfo.btn_bar.isPickupOrder" class="font-14">
						<view><lang keywords="自取时间" chineseTxt="自取时间"/>：<text class="color-red">{{orderinfo.btn_bar.expect_use_time}}</text></view>
						<view v-if="orderinfo.btn_bar.order_mask">{{orderinfo.btn_bar.order_mask}}</view>
					</view>
					<view v-else-if="orderinfo.btn_bar.showUserScore" class="reply-box">
						<view><lang keywords="您对本次订单评分" chineseTxt="您对本次订单评分"/></view>
						<view class="star-box">
							<uniRateCustom class="star" disabled="true" size="20" value="3.3" starName="icon-aixin2" 
								starActiveName="icon-aixin3" top="-10" :color="mobile_head_color" :activeColor="mobile_head_color"></uniRateCustom>
							<text class="num">3.3</text>
						</view>
					</view>
					
					<view class="btn-box">
						<view class="btn pay" v-if="orderinfo.btn_bar.pay_order" @tap="goPay" :style="{background: mobile_head_color}">
							<lang keywords="支付订单" chineseTxt="支付订单"/>
						</view>
						<view class="btn" v-if="orderinfo.btn_bar.pay_by_other" @tap="payByOther">
							<lang keywords="找人付" chineseTxt="找人付"/>
						</view>
						
						<view class="btn" v-if="orderinfo.btn_bar.cancel_order" @tap="goUrl(orderinfo.btn_bar.cancel_order_url)">
							<lang keywords="取消订单" chineseTxt="取消订单" />
						</view>
						
						<view class="btn" v-if="orderinfo.btn_bar.callStaff" @tap="callPhone('store')">
							<lang keywords="联系商户" chineseTxt="联系商户" />
						</view>
						
						<view class="btn" v-if="orderinfo.btn_bar.callDeliver" @tap="callPhone('deliver')">
							<lang keywords="联系骑手" chineseTxt="联系骑手" />
						</view>
						
						<!-- v-if="orderinfo.btn_bar.reminder" -->
						<view class="btn" v-if="orderinfo.btn_bar.reminder"  @tap="userReminder()">
							<lang keywords="我要催单" chineseTxt="我要催单" />
						</view>
						
						<view class="btn" v-if="orderinfo.btn_bar.reply" @tap="goUrl(orderinfo.btn_bar.reply_url)">
							<lang keywords="评价" chineseTxt="评价" />
						</view>
						
						<view class="btn" v-if="orderinfo.btn_bar.after_sale" @tap="goUrl(orderinfo.btn_bar.after_sale_url)">
							<lang keywords="申请售后" chineseTxt="申请售后" />
						</view>
						
						<view class="btn" v-if="orderinfo.btn_bar.confirm" @tap="goConfirmOrder">
							<lang keywords="确认收货" chineseTxt="确认收货" />
						</view>
					</view>
					<view class="progress-box"><view class="progress" :style="'width:'+ orderinfo.order.progress_bar +'%;' "></view></view>
					<view v-if="orderinfo.statusCount > 0" :class="'status-list ' + (show_status ? 'show-all' : '')" :style=" show_status ? 'height:' + 29*orderinfo.statusCount + 'px;'  : '' " @click="clickOrderStatus">
						<view class="item" v-for="(item, index) in orderinfo.status_list" :key="item.id" v-if="show_status || (!show_status && index == orderinfo.statusCount - 1)">
							<text class="time">{{item.dateline}}</text>
							<text class="desc">{{item.status_txt}}</text>
						</view>
						<text v-if="orderinfo.statusCount > 1" class="iconfont icon-xiala close"></text>
					</view>
				</view>
				
				<view class="block-wrapper">
					<view class="border-b title">{{orderinfo.store.name}}</view>
					<view class="goods-list" v-for="(user, index) in orderinfo.goods_list" :key='index'>
						<view class="user-name">{{user.name}}</view>
						<view class="goods" v-for="(item, jndex) in user.list" :key="item.name + jndex">
							<view class="name">
								<view>
									<lang v-if="item.show_seckill" class="discount-icon limit" keywords="限" chineseTxt="限" />
									<lang v-if="item.show_discount" class="discount-icon" keywords="折" chineseTxt="折" />
									<lang v-if="item.show_upgrade" class="discount-icon" keywords="换" chineseTxt="换" />
									<lang v-if="item.show_give" class="discount-icon gift" keywords="满赠" chineseTxt="满赠" />
									<text>{{item.name}}</text>
								</view>
								<view v-if="item.spec" class="spec">{{item.spec}}</view>
							</view>
							<text class="num">x{{item.num}}</text>
							<text class="old-price">
								<block v-if="item.discount_total*1 < item.total*1">{{currency + item.total}}</block>
							</text>
							<text class="price">{{currency + item.discount_total}}</text>
						</view>
					</view>
					<view class="other-money">
						<view class="fee" v-if="orderinfo.order.other_money > 0">
							<lang class="name" keywords="加价送的金额" chineseTxt="加价送的金额"/>
							<text class="desc">{{currency + orderinfo.order.other_money}}</text>
						</view>
						<view class="fee" v-if="orderinfo.order.packing_charge > 0">
							<lang class="name" keywords="包装费" chineseTxt="包装费"/>
							<text class="desc">{{currency + orderinfo.order.packing_charge}}</text>
						</view>
						<view class="fee" v-if="orderinfo.order.freight_charge > 0">
							<lang class="name" keywords="配送费" chineseTxt="配送费"/>
							<text class="desc">{{currency + orderinfo.order.freight_charge}}</text>
						</view>
						<view class="fee" v-if="orderinfo.order.service_charge > 0">
							<lang class="name" keywords="支付手续费" chineseTxt="支付手续费"/>
							<text class="desc">{{currency + orderinfo.order.service_charge}}</text>
						</view>
					</view>
					<view class="other-money">
						<view class="fee" v-for="item in orderinfo.order.discount_detail_arr" :key="item.minus">
							<view class="name">
								<text :class="'discount-icon ' + item.color">{{item.first}}</text>
								<text>{{item.text}}</text>
							</view>
							<text class="desc">-{{currency + item.minus}}</text>
						</view>
					</view>
					<view class="order-money">
						<lang keywords="订单" chineseTxt="订单"/><text class="old-price">：{{currency + orderinfo.order.total_price}}</text>
						<block v-if="discount_total > 0">
							<lang class="color-red" keywords="优惠" chineseTxt="优惠"/>
							<text class="discount-price">：{{currency + discount_total}}</text>
						</block>
						<lang keywords="总计" chineseTxt="总计"/><text>：{{currency}}</text>
						<text class="now-price">{{orderinfo.order.go_pay_price}}</text>
					</view>
				</view>
				
				<view class="block-wrapper" v-if="orderinfo.btn_bar.isDelivOrder">
					<view class="title"><lang keywords="配送信息" chineseTxt="配送信息"/></view>
					<view class="line">
						<lang class="name" keywords="配送服务" chineseTxt="配送服务"/>
						<text class="desc">{{orderinfo.order.deliver_str}}</text>
					</view>
					<view class="line" v-if="orderinfo.order.is_pick_in_store != 3">
						<lang class="name" keywords="期望时间" chineseTxt="期望时间"/>
						<text class="desc">{{orderinfo.order.expect_use_time}}</text>
					</view>
					<view class="line">
						<lang class="name" keywords="配送地址" chineseTxt="配送地址"/>
						<text class="desc">{{orderinfo.order.address}}</text>
					</view>
					<view v-if="orderinfo.order.express_code">
						<view class="line">
							<lang class="name" keywords="快递状态" chineseTxt="快递状态"/>
							<view class="desc" @tap="goUrl(orderinfo.order.express_travel_url)">
								<lang keywords="已发货" chineseTxt="已发货"/>
								<text class="iconfont icon-jiantou"></text>
							</view>
						</view>
						<view class="line">
							<lang class="name" keywords="快递单号" chineseTxt="快递单号"/>
							<view class="desc" @tap="copyText('expressNum')">
								<text id="expressNum">{{orderinfo.order.express_code}}</text>
								<lang class="copy-btn" keywords="复制" chineseTxt="复制"/>
							</view>
						</view>
					</view>
				</view>
				
				<view class="block-wrapper" v-if="orderinfo.btn_bar.isPickupOrder">
					<view class="title"><lang keywords="自取信息" chineseTxt="自取信息"/></view>
					<view class="line">
						<lang class="name" keywords="自取时间" chineseTxt="自取时间"/>
						<text class="desc">{{orderinfo.order.expect_use_time}}</text>
					</view>
					<view class="line">
						<lang class="name" keywords="预留手机号码" chineseTxt="预留手机号码"/>
						<text class="desc">{{orderinfo.order.userphone}}</text>
						
					</view>
					<view class="line">
						<lang class="name" keywords="自取地址" chineseTxt="自取地址"/>
						<text class="desc">{{orderinfo.store.adress}}</text>
					</view>
				</view>
				
				<view class="block-wrapper">
					<view class="title"><lang keywords="订单信息" chineseTxt="订单信息"/></view>
					<view class="line">
						<lang class="name" keywords="订单号码" chineseTxt="订单号码"/>
						<view class="desc">
							<text id="orderNum">{{orderinfo.order.real_orderid}}</text>
							<view class="copy-btn" @tap="copyText('orderNum')">
								<lang keywords="复制" chineseTxt="复制"/>
							</view>
						</view>
					</view>
					<view class="line">
						<lang class="name" keywords="下单时间" chineseTxt="下单时间"/>
						<text class="desc">{{orderinfo.order.create_time}}</text>
					</view>
					<view class="line">
						<lang class="name" keywords="支付方式" chineseTxt="支付方式"/>
						<text class="desc">{{orderinfo.order.pay_type_str}}</text>
					</view>
					<view class="line" v-if="orderinfo.order.invoice_head">
						<lang class="name" keywords="发票抬头" chineseTxt="发票抬头"/>
						<text class="desc">{{orderinfo.order.invoice_head}}</text>
					</view>
					<view class="line">
						<lang class="name" keywords="订单备注" chineseTxt="订单备注"/>
						<text class="desc" v-if="orderinfo.order.desc">{{orderinfo.order.desc}}</text>
						<lang class="desc" v-else keywords="无" chineseTxt="无"/>
					</view>
				</view>
				
				<view class="block-wrapper" v-if="orderinfo.order.paid == 1">
					<view class="title"><lang  keywords="支付信息" chineseTxt="支付信息"/></view>
					<view class="line" v-if="orderinfo.order.pay_time">
						<lang class="name" keywords="支付时间" chineseTxt="支付时间"/>
						<text class="desc">{{orderinfo.order.pay_time}}</text>
					</view>
					<view class="line">
						<lang class="name" keywords="总计" chineseTxt="总计"/>
						<text class="desc">{{currency + orderinfo.order.go_pay_price}}</text>
					</view>
					<view class="line" v-if="orderinfo.order.card_discount > 0 && orderinfo.order.card_discount < 10">
						<lang class="name" keywords="商家会员卡折扣" chineseTxt="商家会员卡折扣"/>
						<text class="desc color-red">-{{currency + orderinfo.order.minus_card_discount}}({{orderinfo.order.card_discount}}折)</text>
					</view>
					<view class="line" v-if="orderinfo.order.coupon_price > 0">
						<lang class="name" keywords="平台优惠券" chineseTxt="平台优惠券"/>
						<text class="desc color-red">-{{currency + orderinfo.order.coupon_price}}</text>
					</view>
					<view class="line" v-if="orderinfo.order.card_price > 0">
						<lang class="name" keywords="商家优惠券" chineseTxt="商家优惠券"/>
						<text class="desc color-red">-{{currency + orderinfo.order.card_price}}</text>
					</view>
					<view class="line" v-if="orderinfo.order.score_deducte > 0">
						<view class="name">
							<text>{{score_name}}</text>
							<lang  keywords="抵扣" chineseTxt="抵扣"/>
						</view>
						<text class="desc">{{currency + orderinfo.order.score_deducte}}</text>
					</view>
					<view class="line" v-if="orderinfo.order.card_give_money > 0">
						<lang class="name" keywords="会员卡赠送余额支付" chineseTxt="会员卡赠送余额支付"/>
						<text class="desc">-{{currency + orderinfo.order.card_give_money}}</text>
					</view>
					<view class="line" v-if="orderinfo.order.merchant_balance > 0">
						<lang class="name" keywords="商家余额抵扣" chineseTxt="商家余额抵扣"/>
						<text class="desc">-{{currency + orderinfo.order.merchant_balance}}</text>
					</view>
					<view class="line" v-if="orderinfo.order.balance_pay > 0">
						<lang class="name" keywords="平台余额抵扣" chineseTxt="平台余额抵扣"/>
						<text class="desc">-{{currency + orderinfo.order.balance_pay}}</text>
					</view>
					<view class="line" v-if="orderinfo.order.payment_money > 0">
						<lang class="name" keywords="实付金额" chineseTxt="实付金额"/>
						<text class="desc">{{currency + orderinfo.order.payment_money}}</text>
					</view>
				</view>
				
			</view>
			
			<!-- 店铺联系方式弹窗 -->
			<view :class="'shareBtnsContent contact-box ' + (showPhoneBox ? 'active' :'')">
				<view class="title desc"><lang keywords="请选择联系方式" chineseTxt="请选择联系客服的方式"></lang></view>
				<view class="list">
					<view class="desc" v-for="(item, index) in phoneList" :key="index" @tap="telPhone(item)">{{item}}</view>
				</view>
				<button class="btn" @tap="closeMask('showPhoneBox')"><lang keywords="取消" chineseTxt="取消"></lang></button>
			</view>
			<view class="mask_bg" v-if="showPhoneBox" @tap="closeMask('showPhoneBox')"></view>
		</view>
	</view>
</template>

<script>
var app = getApp();
var _this;
var getOrderDetailTimer = null;
import common from '../../../utils/common.js'
import uniRateCustom from '../../../appComponent/uni/uni-rate/uni-rate-custom.vue'
export default {
	components: { uniRateCustom },
	data() {
		return {
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [],
			showMap: false,
			order_id: '',
			show_status: false,
			mobile_head_color: '',
			config: '',
			orderinfo: '',
			mapContext: '',
			currency: '¥',
			discount_total: 0, // 订单优惠金额
			score_name: '积分', // 积分别名
			systemInfo: {},
			opacity: 0,
			mapOpacity: 1,
			scrollTop: 0,
			nowStatus: {}, // 订单的当前状态
			showPayTip: true, // 支付后未接单提示
			showPhoneBox: false,
			phoneList: [], // 多个电话的情况
			user_options: {},
		}
	},
	onLoad (options) {
		_this = this
		this.order_id = options.order_id
		
		// #ifdef H5
			console.log('准备跳小程序页', _this);
			common.webToMiniapp(_this.route, options, 'redirect')
		// #endif
		
		if (!app.globalData.userInfo) {
			//调用应用实例的方法获取全局数据
			_this.user_options = {
				toLogin: true,
				refuseIsShow: true,
				showCancel: false
			}
		} else {
			_this.getOrderInfo()
		}
		this.systemInfo = uni.getSystemInfoSync()
		console.log('系统信息', this.systemInfo)
		
		common.setMainColor(this, (config) => {
			console.log('订单详情页面config', config)
			_this.currency = config.config.Currency_symbol
			_this.score_name = config.score_name
		})
	},
	onReady () {
		this.mapContext = uni.createMapContext('orderMap', this)
	},
	onUnload () {
		console.log('orderDetail 页面准备关掉了');
		if(getOrderDetailTimer){
			clearTimeout(getOrderDetailTimer);
			console.log('getOrderDetailTimer 清掉了');
		}
	},
	onPageScroll (e) {
		console.log('页面滚动', e)
		if (!_this.showMap) return 
		this.scrollTop = e.scrollTop
		setTimeout(() => {
			let minDistance = _this.systemInfo.windowWidth - 260
			let maxDistance = 130 + minDistance
			let opacity = (_this.scrollTop - minDistance) / 130
			if (_this.opacity <= 1 || opacity <= 1) {
				_this.opacity = opacity
				_this.mapOpacity = 1 - _this.opacity
				console.log('页面滚动111', e, _this.scrollTop, _this.opacity)
			}
		}, 100)
	},
	methods: {
		getUserInfo(e) {
			if (e.detail.userInfo) {
				_this.userInfo = e.detail.userInfo
		
				console.log('that.data.userInfo', _this.userInfo);
		
				_this.getOrderInfo()
			}
		},
		// 导航按钮
		openMap () {
			uni.openLocation({
				latitude: this.orderinfo.store.lat*1,
				longitude: this.orderinfo.store.long*1,
				name: this.orderinfo.store.name,
				address: this.orderinfo.store.adress,
				success: function () {
					console.log('success');
				}
			});
		},
		copyText (id) {
			// #ifdef H5
			const range = document.createRange();
			range.selectNode(document.getElementById(id));
	
			const selection = window.getSelection();
			if(selection.rangeCount > 0) selection.removeAllRanges();
			selection.addRange(range);
			document.execCommand('copy');
			selection.removeRange(range);
			uni.showToast({
				title: common.changeTxt('复制成功'),
				icon:' success'
			})
			// #endif
			
			// #ifdef MP-ALIPAY || MP-WEIXIN
			uni.setClipboardData({
			    data: text,
			    success: function () {
			        uni.showToast({
			        	title: common.changeTxt('复制成功'),
						icon:' success'
			        })
			    }
			});
			// #endif
		},
		closeMask (name) {
			this[name] = false
		},
		// 催单
		userReminder () {
			let params= {
				order_id: this.order_id
			}
			common.post('My&a=user_reminder', params, (res) => {
			})
		},
		goConfirmOrder (){
			let params= {
				order_id: this.order_id
			}
			common.post('My&a=shop_finishOrder', params, (res) => {
				uni.showToast({
					title: common.changeTxt('已确认'),
					icon:' success'
				})
			})
		},
		callPhone (type) {
			let phone = ''
			if (type == 'store') {
				phone = this.orderinfo.store.phone
			} else if (type == 'deliver') {
				phone = this.orderinfo.deliver_user.phone
			}
			phone = phone.split(' ')
			if (phone.length == 1) {
				this.telPhone(phone[0])
			} else {
				this.phoneList = phone
			}
		},
		telPhone (phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		closePayTip () {
			this.showPayTip = false
		},
		goUrl (url) {
			if (!url) return
			common.parseUrl(url)
		},
		// 跳转支付
		goPay () {
			var sys_id = this.orderinfo.order.coupon_id
			var mer_id = this.orderinfo.order.card_id
			var use_sys_coupon = sys_id != 0 ? true : false
			var use_mer_coupon = mer_id != 0 ? true : false
			
			let url = `/pages/shop_new/confirmOrder/pay?order_id=${this.order_id}&type=shop&use_sys_coupon=${use_sys_coupon}&use_mer_coupon=${use_mer_coupon}&system_coupon_id=${sys_id}&merchant_coupon_id=${mer_id}`
			
			// #ifdef H5
			common.webToMiniapp(url, {})
			// #endif
			
			uni.navigateTo({ url })
			
			
		},
		payByOther(){
			common.parseUrl(this.orderinfo.btn_bar.pay_by_other_url);
		},
		clickOrderStatus () {
			this.show_status = !this.show_status 
		},
		getOrderInfo () {
			var postParam = {order_id: this.order_id};
			if(_this.orderinfo){
				postParam.noTip = true;
			}
			common.post('My&a=shop_order_detail', postParam, (res) => {
				getOrderDetailTimer = setTimeout(() => {
					_this.getOrderInfo()
				}, 6000)
				console.log('订单详情', res)
				if (res.statusCount && res.statusCount > 0) {
					_this.nowStatus = res.status_list[0].status_txt
					res.status_list.reverse()
				}
				if (res.order) {
					_this.discount_total = res.order.minus_price*1 + res.order.vip_level_reduce_money*1
				}
				
				_this.orderinfo = res
				
				if (_this.showPayTip) {
					setTimeout(() => {
						_this.showPayTip = false
					}, 6000)
				}
				
				console.log('处理之后的订单详情', res)
				_this.covers = [];
				
				if (res.order.isShowMap == 1) {
					_this.covers.push({
						longitude: res.store.lng,
						latitude: res.store.lat,
						iconPath: res.order.store_map_icon,
						width: 40,
						height: 71
					})
					if (res.deliver_user) {
						let deliver = {
							longitude: res.deliver_user.now_lng,
							latitude: res.deliver_user.now_lat,
							iconPath: '/static/images/driver.png'
						}
						if (res.deliver_user.togo != 'none') {
							deliver.callout = {
								content: '分配配送员\n距' + (res.deliver_user.togo == 'store' ? '店铺' : '您') +　res.deliver_user.distance,
								fontSize: '13',
								bgColor: '#ff1940',
								color: '#ffffff',
								borderRadius: '30',
								padding: '10',
								display: 'ALWAYS'
							}
						} 
						_this.covers.push(deliver)
					}
				}
				_this.showMap = res.order.isShowMap == 1
				_this.opacity = _this.showMap ? 0 : 1
				console.log('11111111地图标记', _this.covers)
				setTimeout(() => {
					if(_this.covers.length > 0){
						_this.mapContext.includePoints({
							padding: [180, 180, 180, 180],
							points: _this.covers
						})
					}
				}, 500)
			})
		}
	}
}
</script>

<style lang="stylus">
page
	background-color #fff
.order-detail
	position relative
	background #fff
	.font-14
		font-size 14px
	.font-10
		font-size 10px
	.color-red
		color #FF1940 !important
	.map-box
		width 100%
		position relative
		.map
			position fixed
			top 0
			left 0
			width 100%
			height 100%
		.top-wrapper
			/*position fixed*/
			top 0
			left 0
			width 100%
			height 260px
			opacity 0
		.top-title
			position fixed
			top 0
			left 0
			z-index 15
			width 100%
			height 44px
			color #fff
			font-weight 600
			line-height 44px
			padding 0 20rpx
			font-size 20px
	.info-box
		padding-bottom 60rpx
		.block-wrapper
			background #fff
			box-shadow 0px 0px 6px rgba(0,0,0,0.16)
			margin 0 20rpx 30rpx 20rpx
			border-radius 5px
			padding 20rpx
			position relative
			z-index 10
			&.status-mask
				position absolute
				top 15px
				display flex
				justify-content space-between
				align-items center
				font-size 12px
				color #555
				padding 20rpx
				max-height 100px
				overflow hidden
				transition all .3s
				&.cancel
					max-height 0
					padding 0
					margin-bottom 0
				.img
					width 40px
					height 40px
					flex-shrink 0
					margin-right 10rpx
				.close
					position absolute
					top 16rpx
					right 16rpx
					&::after
						content ''
						position absolute
						top -10px
						left -10px
						right -10px
						bottom -10px
			&.pick-mask
				display flex
				justify-content space-between
				align-items center
				color #555
				font-size 14px
				.btn
					margin-left 20rpx
					background #FF1940
					color #fff
					flex-shrink 0
					padding 4px 10px
					border-radius 20px
					display flex
					.iconfont
						font-weight bold
						margin-right 2px
			&.order-status
				color #333
				.small-tip
					font-size 12px
					color #999
					margin-top 5px
				.expected-time
					font-size 16px
					font-weight 600
					.time
						padding 0 5px
				.reply-box
					display flex
					justify-content space-between
					.star-box
						display flex
						align-items center
						.num
							font-size 14px
							margin-left 5px
				.btn-box
					.btn
						display inline-block
						margin-top 30rpx
						border 1px solid #e5e5e5
						font-size 14px
						padding 4rpx 12rpx
						border-radius 8rpx
						margin-right 20rpx
						&.pay
							color white
				.progress-box
					margin-top 30rpx
					background #dddddd
					height 8px
					border-radius 10px
					position relative
					overflow hidden
					.progress
						position absolute
						top 0
						left 0
						bottom 0
						background rgb(6, 193, 174)
						border-radius 10px
				.status-list
					height 30px
					overflow hidden
					transition all .3s
					position relative
					.item
						padding-top 10px
						font-size 14px
						.time
							font-weight 600
							padding-right 30rpx
						.desc
							color #373737
					.iconfont
						font-size 28px
						font-weight bold
						color #333
						transition all .3s
						transform rotate(0deg)
						position absolute
						right 0
						top 3px
					&.show-all
						.iconfont.close
							transform rotate(180deg)
			.discount-icon
				background #ff1940
				color #fff
				margin-right 10rpx
				display inline-block
				height 16px
				padding 0 2px
				border-radius 4px
				text-align center
				font-size 12px
				&.limit
					background #ff9900
				&.gift
					background #e72565
				&.red
					background rgb(255, 25, 64)
				&.green
					background rgb(25, 216, 120)
			.title
				font-size 16px
				font-weight 600
				color #585858
				padding-bottom 20rpx
				border-bottom 1px solid #f2f2f2
			.line
				display flex
				justify-content space-between
				font-size 13px
				padding-top 20rpx
				.name
					color #999
					width 110px
				.desc
					color #373737
					text-align right
					.copy-btn
						border 1px solid #e5e5e5
						margin-left 5px
						padding 2px 5px
						border-radius 5px
						font-size 12px
						display inline-block
					.icon-jiantou
						vertical-align middle
			.other-money
				.fee
					display flex
					justify-content space-between
					font-size 12px
					color #585858
					padding-top 30rpx
					.name
						font-size 13px
					&:last-child
						padding-bottom 30rpx
						border-bottom 1px solid #f2f2f2
			.goods-list
				padding 20rpx 0
				border-bottom 1px solid #f2f2f2
				.user-name
					font-size 14px
					color #333
				.goods
					padding 20rpx 0
					font-size 12px
					color #535353
					display flex
					.name
						flex-grow 1
						.spec
							color #aaa
					.num
						width 90rpx
						color #8E8E93
						text-align right
						margin-left 10rpx
						flex-shrink 0
					.old-price
						color #8E8E93
						width 120rpx
						text-decoration line-through
						text-align right
						margin-left 10rpx
						flex-shrink 0
					.price
						width 120rpx
						text-align right
						margin-left 10rpx
						flex-shrink 0
			.order-money
				padding-top 20rpx
				text-align right
				font-size 13px
				color #373737
				.old-price
					margin-right 30rpx
				.discount-price
					margin-right 30rpx
					color #ff1940
				.now-price
					font-size 18px
					
					

/* 联系电话弹窗 */
.mask_bg {
	position: fixed;
	z-index: 1000000000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;
	
}

.shareBtnsContent {
	position: fixed;
	z-index: 1000000001;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	transform: translate(0, 150%);
	-webkit-transform: translate(0, 150%);
	color: #333;
}

.shareBtnsContent.active {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0)
}

.shareBtnsContent.contact-box {
	padding: 10px;
	width: auto;
	background: transparent;
	right: 0;
	max-height: 70%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: #333;
	font-size: 16px;
}
.shareBtnsContent.contact-box .title{
	border-radius: 5px 5px 0 0;
}
.shareBtnsContent.contact-box .desc{
	background: #fff;
	line-height: 2.55555556;
	border-bottom: 1px solid #f2f2f2;
	background: rgba(255, 255, 255, .98);
	text-align: center;
}
.shareBtnsContent.contact-box .list{
	flex-grow: 1;
	overflow-y: auto;
	margin-bottom: 10px;
	border-radius: 0 0 5px 5px;
}
.shareBtnsContent.contact-box .list .desc{
	color: #E73D43;
}
.shareBtnsContent.contact-box .list .desc:last-child{
	border: none;
}
.shareBtnsContent.contact-box .btn{
	font-size: 16px;
	width: 100%;
	background: rgba(255, 255, 255, .98);
	flex-shrink: 0;
}

#orderNum, #expressNum {
	-webkit-user-select: auto;
	-webkit-tap-highlight-color: #fff;
}

</style>